<template>
    <div>
        <h1>客服聊天面板</h1>
        <div v-for="(msg, index) in messages" :key="index">
            <p v-if="msg.system_message">{{ msg.system_message }}</p>
            <p v-else>{{ msg.user_id }}: {{ msg.message }}</p>
        </div>
        <input v-model="input" placeholder="回复消息" />
        <button @click="sendReply">发送</button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const messages = ref([]);
const input = ref('');
let socket = null;

const kefu_id = 'kefu_1'; // 客服唯一 ID

const sendReply = () => {
    socket.send(JSON.stringify({ message: input.value }));
    input.value = '';
};

onMounted(() => {
    socket = new WebSocket(`ws://127.0.0.1:8000/ws/chat/${kefu_id}/`);
    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        messages.value.push(data); // 添加消息到对话框
    };
});
</script>
